<template>
  <s-layout :positionAbsolute="'position: absolute;'" id="layout" navbar="normal" :title="'工作台'" :autoBack="false"
    leftIconColor="#ffffff" :leftIcon="' '" :bgColor="bgColor" :titleStyle="{ color: '#fff', fontSize: '32rpx' }">
    <view id="app" :style="{ backgroundImage: `url( ${baseUrl}/uploads/uniapp_image/staff_v1/WorkSpace_bg1@2.png)` }">
      <view class="header">
      </view>
      <!-- 列表综合 -->
      <scroll-view scroll-y class="comprehensive" @scrolltolower="ListScrolltolower">
        <view class="work-list" v-for="item in worklist" :key="item.id">
          <view class="title">{{ item.title }}</view>
          <view class="items">
            <view class="item_col_3" v-for="i in item.children" :key="i.id" @tap="workItem(i)">
              <view class="badge" v-if="i.istips == 1 ? true : false">
                <up-badge :bgColor="badge_color" max="99" :value="i.tips"></up-badge>
              </view>
              <image :src="`${baseUrl}` + i.icon" mode="scaleToFill" />
              <view class="subtitle">{{ i.title }}</view>
            </view>
          </view>
        </view>

      </scroll-view>
    </view>
  </s-layout>
</template>

<script setup>
import { baseUrl } from '@/sheep/config';
import { ref } from "vue";
import sheep from '@/sheep';
import { onLoad,onShow } from "@dcloudio/uni-app";
const bgColor = ref('rgba(0,0,0,0)')
const badge_color = ref('#FF1212');
onShow(() => {
  getlist()
})
// 数据
const worklist = ref([])
//上方代理个人信息请求方法
async function getlist() {
  const res = await sheep.$api.workbench.postCommonWxmenus();
  worklist.value = []
  worklist.value = res.data
}

//点击跳转按钮
const workItem = (e) => {
  uni.$u.throttle(() => {
    if(e.id == 64) {  // 此处为 打款 菜单，做一个模板消息判断处理
        // #ifdef MP
        sheep.$platform.useProvider('wechat').subscribeMessage('apply_notice');
        // #endif
    }
    sheep.$router.go(e.name, { title: e.title });
  }, 500)
}

</script>

<style lang="scss" scoped>
page {
  width: 100%;
  height: 100%;
}

#app {
  // height: 100vh;
  background-size: 100%;
  width: 100%;
  min-height: 100%;
  background-repeat: no-repeat;
  background-attachment: fixed;
  overflow: hidden;
}

.header {
  width: 93%;
  margin: 0 auto;
  height: 404rpx;
  display: flex;
  align-items: flex-end;

}

//  滚动容器
.comprehensive {
  border-radius: 16rpx;
   width: calc(100% - 40rpx);
  background-color: rgba(0, 0, 0, 0);
  margin: 0 20rpx;
  height: 63vh ;
}

//内容列表
.work-list {
  // width: 100%;
  // margin: 26rpx auto;
  margin: 26rpx 0rpx;
  background: $uni-bg-color;
  border-radius: 16rpx;
  background-color: #FFFFFF;
  box-shadow: 0 4rpx 4rpx 0 rgba(0, 0, 0, 0.05);

  .title {
    margin: 10rpx 30rpx 0 30rpx;
    border-bottom: 2rpx solid #EFEFEF;
    height: 88rpx;
    line-height: 88rpx;
    font-family: PingFangSC;
    color: $uni-text-color;
    font-weight: 500;
    font-size: 30rpx;
    padding-left: 10rpx;
  }

  .items {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding-bottom: 38rpx;

    .item_col_3 {
      width: 25%;
      text-align: center;
      margin: 30rpx 0 0 0;
      position: relative;

      .badge {
        position: absolute;
        right: 34rpx;
        top: 6rpx;
        z-index: 9;

        :deep(.u-badge--not-dot) {
          // padding: 6rpx 4rpx !important;
          font-size: 16rpx !important;
        }
      }
    }

    image {
      width: 90rpx;
      height: 90rpx;
      border-radius: 50%;
      margin-bottom: 10rx;
    }

    .subtitle {
      font-family: PingFangSC;
      color: $uni-text-color;
      font-weight: 500;
     font-size:$uni-font-size-26;
      text-align: center;
    }
  }

}

scroll-view ::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
  color: transparent;
}
</style>